<template>
  <div id="userInfo">
    <h3>个人基本信息</h3>
    <p>用户名: {{dataForm.username}}</p>
    <p>角色: {{dataForm.roleName}}</p>
    <p>电话: <el-input class="s_input" v-model="dataForm.mobile"></el-input></p>
    <p>邮箱: <el-input class="s_input" v-model="dataForm.email"></el-input></p>
    <el-button @click="infoChange">保存</el-button>
    <!-- <h3 v-if="$store.state.user.roleName!=='管理员'">我的订单</h3>
    <el-table v-if="$store.state.user.roleName!=='管理员'" :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
      <el-table-column v-for="row in headerList" :key="row.key" :prop="row.key" :min-width="row.width" :label="row.label" header-align="center" align="center"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
        <template slot-scope="scope">
          <div class="btnList">
            <div><el-button type="text" size="small" @click="seeDetail(scope.row)">查看详情</el-button></div>
            <div><el-button type="text" size="small" v-if="$store.state.user.roleName=='设计师'&&scope.row.status=='1'" @click="statusChange(scope.row, '2')">接受订单</el-button></div>
            <el-upload
              v-if="$store.state.user.roleName=='设计师'&&scope.row.status=='2'"
              class="uploader"
              :action="uploadUrl"
              :headers="headers"
              :show-file-list="false"
              accept=".jpeg,.png,.jpg,.gif"
              :on-success="(res, file)=> { return successPictureHandle(res, file, scope.row)}">
              <el-button type="text" size="small">上传图片</el-button>
            </el-upload>
            <div><el-button type="text" size="small" v-if="$store.state.user.roleName=='用户'&&scope.row.status=='3'" @click="remuneration(scope.row, '4')">支付报酬</el-button></div>
            <div><el-button type="text" size="small" v-if="$store.state.user.roleName=='用户'&&scope.row.status=='4'" @click="confirmOrder(scope.row, '5')">确认订单</el-button></div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <order-detail ref="orderDetail"/> -->
  </div>
</template>

<script>
// import orderDetail from '../order/orderDetail.vue'
export default {
  // components: { orderDetail },
  data () {
    return {
      // dataListLoading: false,
      // uploadUrl: this.$http.adornUrl('/uploadfile'), // 图片上传地址
      // headers: { token: this.$cookie.get('token') }, // 图片所需token
      dataForm: {}
      // headerList: [{
      //   key: 'orderSn',
      //   label: '订单编号',
      //   width: '150'
      // },
      // {
      //   key: 'clothingTypeName',
      //   label: '服装类型',
      //   width: '150'
      // },
      // {
      //   key: 'designerName',
      //   label: '设计师',
      //   width: '150'
      // },
      // {
      //   key: 'statusName',
      //   label: '订单状态',
      //   width: '150'
      // },
      // {
      //   key: 'orderDescribe',
      //   label: '订单描述',
      //   width: '150'
      // },
      // {
      //   key: 'customerAmount',
      //   label: '价格(元)',
      //   width: '150'
      // }],
      // dataList: []
    }
  },
  activated () {
    this.getUserInfo()
  },
  methods: {
    // 查看详情
    // seeDetail (row) {
    //   this.$refs.orderDetail.init(row)
    // },
    // 用户信息
    infoChange () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/update'),
        method: 'post',
        data: this.$http.adornParams({
          ...this.dataForm
        })
      }).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.$message.success('操作成功!')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 状态改变
    // statusChange (row, status) {
    //   this.$http({
    //     url: this.$http.adornUrl('/sys/clothingorder/changestatus/' + row.id + '/' + status),
    //     method: 'post'
    //   }).then(({ data: res }) => {
    //     if (res && res.code === 0) {
    //       this.$message.success('操作成功!')
    //       this.getDataList()
    //     } else {
    //       this.$message.error(res.msg)
    //     }
    //   })
    // },
    // 图片上传成功
    // successPictureHandle (res, file, row) {
    //   console.log(res, file, row)
    //   if (res.code === 0) {
    //     this.uploadPicture(row, res.pictureInfoVOS[0].imgAddress)
    //   } else {
    //     this.$message.error(res.msg)
    //   }
    // },
    // 上传图片之后发送给服务器
    // uploadPicture (row, designerPicture) {
    //   this.$http({
    //     url: this.$http.adornUrl('/sys/clothingorder/updesginerpic'),
    //     method: 'post',
    //     data: this.$http.adornParams({
    //       'id': row.id,
    //       'designerPicture': designerPicture
    //     })
    //   }).then(({ data: res }) => {
    //     if (res && res.code === 0) {
    //       this.statusChange(row, '3')
    //     } else {
    //       this.$message.error(res.msg)
    //     }
    //   })
    // },
    // 支付报酬
    // remuneration (row, status) {
    //   this.$prompt('请输入支付密码', '支付报酬', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     inputPlaceholder: '请输入支付密码',
    //     inputPattern: /\S/,
    //     inputErrorMessage: '请输入支付密码',
    //     inputType: 'password',
    //     type: 'warning'
    //   }).then(({ value }) => {
    //     console.log(value)
    //     this.$http({
    //       url: this.$http.adornUrl('/clothingtype/pay'),
    //       method: 'get',
    //       params: this.$http.adornParams({
    //         'password': value
    //       })
    //     }).then(({ data: res }) => {
    //       if (res && res.code === 0) {
    //         this.statusChange(row, status)
    //       } else {
    //         this.$message.error(res.msg)
    //       }
    //     })
    //   }).catch(() => {
    //   })
    // },
    // 确认订单 发表评论
    // confirmOrder (row, status) {
    //   this.$prompt('请输入对该设计的评价', '确认订单', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     inputPlaceholder: '请输入评价',
    //     inputPattern: /\S/,
    //     inputErrorMessage: '请输入评价',
    //     type: 'warning'
    //   }).then(({ value }) => {
    //     console.log(value)
    //     this.$http({
    //       url: this.$http.adornUrl('/sys/clothingorder/addOrderEvaluation/' + row.id + '/' + value),
    //       method: 'post'
    //       // params: this.$http.adornParams({
    //       //   'password': value
    //       // })
    //     }).then(({ data: res }) => {
    //       if (res && res.code === 0) {
    //         this.statusChange(row, status)
    //       } else {
    //         this.$message.error(res.msg)
    //       }
    //     })
    //   }).catch(() => {
    //   })
    // },
    // 获取数据列表
    // getDataList () {
    //   this.dataListLoading = true
    //   this.$http({
    //     url: this.$http.adornUrl('/sys/clothingorder/orderpage'),
    //     method: 'get',
    //     params: this.$http.adornParams({
    //       'page': 1,
    //       'limit': 999
    //     })
    //   }).then(({ data: res }) => {
    //     if (res && res.code === 0) {
    //       this.dataList = res.data.list
    //     } else {
    //       this.dataList = []
    //     }
    //     this.dataListLoading = false
    //   })
    // },
    // 获取数据列表
    getUserInfo () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/info'),
        method: 'get'
      }).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.dataForm = res.jsonObject
          this.$store.commit('user/updateName', res.jsonObject.username)
          this.$store.commit('user/updateRoleName', res.jsonObject.roleName)
          // if (this.$store.state.user.roleName !== '管理员') {
          //   this.getDataList()
          // }
        } else {
          this.dataForm = {}
        }
      })
    }
  }
}
</script>

<style lang="scss">
.btnList{
  .uploader{
    display: block;
  }
}
.s_input{
  width: 200px;
}
</style>